<!-- 时段锁定号源信息 -->
<template>
  <el-dialog
    title="时段锁定号源信息"
    :visible.sync="dialogVisible"
    :destroy-on-close="true"
    :before-close="handleClose"
    width="80%"
  >
    <div>
      <div class="aiw-main">
        <el-table
          :data="tableData"
          border
          size="mini"
          :header-cell-style="{backgroundColor: '#EEF5FE'}"
          style="width: 100%;">
          <el-table-column prop="appointmentDate" label="日期" align="center" :formatter="frmTime"></el-table-column>
          <el-table-column prop="checkClass" label="班次" align="center"></el-table-column>
          <el-table-column prop="beginTime" label="开始时间" align="center"></el-table-column>
          <el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
        </el-table>
        <el-table
          :data="tableData"
          border
          size="mini"
          :header-cell-style="{backgroundColor: '#EEF5FE'}"
          style="width: 100%;margin-top: 10px;">
          <el-table-column prop="initialNum" label="初始号码" align="center"></el-table-column>
          <el-table-column prop="checkNum" label="号源" align="center"></el-table-column>
          <el-table-column prop="reserveNum" label="预留" align="center"></el-table-column>
          <el-table-column prop="addNum" label="追加" align="center"></el-table-column>
          <el-table-column prop="callNum" label="已预约" align="center"></el-table-column>
          <el-table-column prop="appointmentStatus" label="预约状态" align="center">
            <template slot-scope="scope">
              <span :class="appoStatusClassFlr(scope.row.appointmentStatus)">{{scope.row.appointmentStatus}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-card shadow="hover" class="ky-card-xs ky-card-hdbg">
        <el-card class="ky-card-xs ky-card-hdbg" v-for="(item,index) in ruledmbList" :key="index">
          <el-form inline>
            <el-form-item label="规则名称：">
              <span>{{item.ruleName}}</span>
            </el-form-item>
            <el-form-item label="已预约数量：">
              <span>{{item.reservedNum}}</span>
            </el-form-item>
            <el-form-item label="创建时间：">
              <span>{{item.createTime}}</span>
            </el-form-item>
            <el-form-item label="修改时间：">
              <span>{{item.updateTime}}</span>
            </el-form-item>
          </el-form>
          <div style="padding:0 20px">
            <div v-for="(obj,index) in item.ruleData" :key="index">
              <i :class="'rs_icon rs_icon'+obj.modelType"></i>
              <span>{{obj.ruleCondition}}</span>
              <span>{{obj.conditionCode}}</span>
              <span>{{obj.conditionValue}}</span>
            </div>
          </div>
        </el-card>
      </el-card>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { appointmentruledmbGetlist } from '@/api/api.js'
export default {
  name: '',
  mixins: [],
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    sData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      ruledmbList: {},
      ruleData: {}
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val
      if (val) {
        this.getDetail()
        this.tableData = [this.sData]
      }
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    },
    getDetail() {
      appointmentruledmbGetlist({ hospitalCode: this.sData.hospitalCode, listDmbId: this.sData.id }).then(res => {
        if (res && res.code === 10000) {
          this.ruledmbList = res.content.list
          this.ruledmbList = [
            {
              ruleName: '测试规则一',
              reservedNum: 10,
              createTime: '2021-12-27 15:13:00',
              updateTime: '2021-12-27 15:13:00',
              ruleData: [
                {
                  modelType: 1,
                  ruleCondition: '患者类型',
                  conditionCode: '等于',
                  conditionValue: '住院'
                },
                {
                  modelType: 1,
                  ruleCondition: '患者类型',
                  conditionCode: '等于',
                  conditionValue: '住院'
                }
              ]
            },
            {
              ruleName: '测试规则二',
              reservedNum: 10,
              createTime: '2021-12-27 15:13:00',
              updateTime: '2021-12-27 15:13:00',
              ruleData: [
                {
                  modelType: 1,
                  ruleCondition: '患者类型',
                  conditionCode: '等于',
                  conditionValue: '住院'
                }
              ]
            },
            {
              ruleName: '测试规则三',
              reservedNum: 10,
              createTime: '2021-12-27 15:13:00',
              updateTime: '2021-12-27 15:13:00',
              ruleData: [
                {
                  modelType: 1,
                  ruleCondition: '患者类型',
                  conditionCode: '等于',
                  conditionValue: '住院'
                }
              ]
            }
          ]
        }
      })
    },
    // 预约状态，样式class判断
    appoStatusClassFlr(val) {
      switch (val) {
        case '':
          return 'appo-grey'
        case '节假日':
          return 'appo-danger'
        case '暂停预约':
        case '设备故障':
          return 'appo-warn'
        case '正常预约':
          return 'appo-success'
        default:
          return 'appo-default'
      }
    },
    frmTime(row, column, cellValue, index) {
      return row.appointmentDate.substring(0, 10)
    }
  },
  beforeDestroy() {},
  destroyed() {},
  beforeUpdate() {},
  updated() {}
}
</script>
<style lang='scss' scoped>
.el-form{
    width: 100%;
    display: flex;
    justify-content: space-around;
}
</style>
